<script setup lang="ts">
defineProps<{
  items: { path?: string, name: string }[]
}>()

const router = useRouter()

function goTo(path?: string) {
  if (!path)
    return
  router.replace(path)
}
</script>

<template>
  <div w="full" class="flex items-center py-[26px] pl-[70px] text-[#1f1f1f99] max-md:pl-[var(--padding-x-wrap-md)]">
    <!-- Home -->
    <img src="~/assets/img/icon_home_outline.png" class="mr-[12px] cursor-pointer" @click="goTo('/')" />

    <template v-for="item in items" :key="item.path">
      <img src="~/assets/img/icon_arrow_left_outline.png" class="mr-[12px]" />
      <a class="mr-[12px] inline-block flex-shrink-0 max-md:max-w-[120px]" :class="{ 'cursor-pointer': item.path }" @click="goTo(item.path)"><div v-html="item.name"></div></a>
    </template>
    <!-- <img class="mr-[12px]" src="~/assets/img/icon_arrow_left_outline.png" /> -->
    <!-- <span>{{ name }}</span> -->
  </div>
</template>
